<template>
    <div>
        <div class="option">
            <div class="header">
                <header>
                    <div class="iconfont icon-iconfontjiantou1 back" @click="back"></div>
                    <h3>设置</h3>
                    <div class="right"></div>
                </header>
            </div>
            <ul @click="findPassword">
                <li>设置密码</li>
            </ul>
            <div class="bottom_box">
                <div @click="gotOut">退出登录</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            // 设置密码
            findPassword() {
                this.$router.push("./fitPassword");
            },
            // 点击返回按钮
            back() {
                window.history.back("/user");
            },
            gotOut() {//退出登录
                localStorage.clear('adminToken')
                this.$router.push('/user')
            }
        },
    };
</script>

<style lang="scss">
    .option {
        min-height: 100vh;
        background: #f0f2f5;
        box-sizing: border-box;

        .header {
            height: 11.73333vw;
            line-height: 11.73333vw;
            background: #fff;

            .back {
                float: left;
                width: 10.66667vw;
                text-align: center;
            }

            h3 {
                font-size: 4.8vw;
                color: #595959;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 66.66667vw;
            }

            .right {
                height: 100%;
                float: right;
                font-size: 4vw;
                color: #595959;
                padding: 0 2.66667vw;
            }
        }

        ul {
            margin-bottom: 0;
            // background: #fff;
            padding: 1.33333vw 4vw;
            margin: 2.66667vw 0;

            li {
                height: 14.66667vw;
                line-height: 14.66667vw;
                position: relative;
                font-size: 3.73333vw;
                color: #595959;
            }

            li:before {
                content: "";
                display: block;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%) rotate(45deg);
                width: 2.66667vw;
                height: 2.66667vw;
                border-top: 1px solid #b7b7b7;
                border-right: 1px solid #b7b7b7;
            }
        }

        .bottom_box {
            overflow: hidden;
            background-color: #fff;
            height: 40vw;

            div {
                background-color: #eb6100;
                color: #fff;
                width: 92vw;
                height: 11.73333vw;
                margin: 17.33333vw auto;
                border-radius: 0.10667rem;
                border-radius: 1.06667vw;
                font-size: 4.53333vw;
                text-align: center;
                line-height: 11.73333vw;
            }
        }
    }
</style>